<template>
  <div class="cartcontrol">
    <transition entry-active-class="animate fadeInRight" leave-active-class="animate fadeOutRight">
      <div class="cart_less " v-show="food.count > 0" @click.stop.prevent="lessCart()">
        <span class="iconfont">&#xe61a;</span>
      </div>
    </transition>
    <div class="cart_count" v-show="food.count > 0">
      {{food.count}}
    </div>
    <div class="cart_add iconfont" @click.stop.prevent="addCart()">
      &#xe622;
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'

  export default {
    data() {
      return {
        msg: 'hello vue'
      }
    },
    props: {
      food: Object
    },
    methods: {
      addCart(e) {
        if(!this.food.count) {
          Vue.set(this.food, 'count', 1)
          this.food.count = 1
        }else {
          this.food.count++
        }
        /*eventHub.$emit('cartadd', e)*/

      },
      lessCart() {
        if(this.food.count > 0) {
          this.food.count--
        }
      }
    },

    mounted() {

    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .cartcontrol {
    font-size: 0;
    .cart_less {
      display: inline-block;
      padding: 6px;
      color: rgb(0,160,220);
      &:active {
        color: #4488a2;
      }
      .iconfont {
        font-size: 24px;
        line-height: 24px;
      }
    }
    .cart_count {
      display: inline-block;
      font-size: 14px;
      font-weight: 600;
      vertical-align: top;
      padding-top: 6px;
      line-height: 24px;
      text-align: center;
      color: #141516;
    }
    .cart_add {
      display: inline-block;
      padding: 6px;
      font-size: 24px;
      line-height: 24px;
      color: rgb(0,160,220);
      &:active {
        color: #4488a2;
      }
    }
    .cart_less:active, .cart_add:active {

    }
  }
</style>